<template>

    <a-flex style="width: 100%;" gap="middle" horizontal justify="space-around">
        <a-flex style="width: 100%;" gap="small" vertical>
            <a-typography-text style="font-weight: normal;font-size: 22px;">{{ videoWork.title }}</a-typography-text>
            <a-flex gap="middle">
                <a-typography-text type="secondary">
                    <PlayCircleOutlined /> {{ videoInteractionData.playCount }}
                </a-typography-text>
                <a-typography-text type="secondary">{{ videoWork.publishTime }}</a-typography-text>
                <a-typography-text type="secondary">
                    <ExclamationCircleOutlined /> {{ videoWork.type == 0 ? `原创视频，禁止转载` : `转载自${videoWork.repostUrl}` }}
                </a-typography-text>
            </a-flex>
            <video style="width: 100%;" autoplay="true" controls :src="videoResource.temporaryPlayUrl"></video>

            <p>{{ videoWork.description }}</p>

            <a-flex gap="middle" justify="space-around">
                <UserItem :user="videoAuthor"></UserItem>
                <a-flex style="height: 100%;" align="center" gap="middle">
                    <a-button @click="like" :type="videoInteractionData.like ? 'primary' : 'default'">
                        <LikeOutlined /> {{ videoInteractionData.likeCount }}
                    </a-button>
                    <a-button @click="collect" :type="videoInteractionData.collect ? 'primary' : 'default'">
                        <StarOutlined /> {{ videoInteractionData.collectCount }}
                    </a-button>
                </a-flex>
            </a-flex>
        </a-flex>
        <a-flex style="width:400px" vertical>
            <p>相关推荐</p>
            暂无...
        </a-flex>
    </a-flex>


</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import request from '@/script/utils/request'; // 导入Axios实例
import { useRoute } from 'vue-router'
import { message } from 'ant-design-vue';
const route = useRoute()
import UserItem from '@/components/user/UserItem.vue';

const loading = ref(false)


const videoWork = ref({
    "id": null,
    "title": null,
    "description": null,
    "categoryId": '-',
    "publishTime": null,
    "type": '-',
    "duration": '-',
    "qualities": null,
    "userId": '-'
})
const videoResource = ref({
    temporaryPlayUrl: "",
})
const videoAuthor = ref({
    "id": null,
    "nickname": null,
    "intro": null,
    "avatarUrl": null,
    "sex": null,
    "follow": null,
    "fansCount": "-"
})
const videoInteractionData = ref({
    "playCount": '-',
    "likeCount": '-',
    "collectCount": '-',
    "repostCount": '-',
    "like": null,
    "collect": null,
})
onMounted(async () => {
    console.log('mounted')
    try {
        //获取视频信息
        const videoWorkResponse = await request.get(`/video/${route.params.workId}`)
        videoWork.value = videoWorkResponse.data;

        //获取作者信息
        const videoAuthorResponse = await request.get(`/user/${videoWork.value.userId}/profile`)
        videoAuthor.value = videoAuthorResponse.data;

        //获取相关视频？

        //获取视频播放链接
        const videoResourceResponse = await request.get(`/video/resource/${route.params.workId}?quality=${videoWork.value.qualities.split(',')[0]}`)
        videoResource.value = videoResourceResponse.data;

        //获取互动数据
        const videoInteractionDataResponse = await request.get(`/video/interaction/${route.params.workId}`)
        videoInteractionData.value = videoInteractionDataResponse.data;
    } catch (e) {
        message.warning(e.message)
    } finally {
        loading.value = false;
    }

})



//点赞
const like = () => {
    if (videoInteractionData.value.like) {
        //取消点赞
        request.post(`/video/interaction/${route.params.workId}/unlike`)
        videoInteractionData.value.like = false;
        videoInteractionData.value.likeCount--;
    } else {
        //点赞
        request.post(`/video/interaction/${route.params.workId}/like`)
        videoInteractionData.value.like = true;
        videoInteractionData.value.likeCount++;
    }
}


//收藏
const collect = () => {
    if (videoInteractionData.value.collect) {
        //取消收藏
        request.post(`/video/interaction/${route.params.workId}/cancel-collect`)
        videoInteractionData.value.collect = false;
        videoInteractionData.value.collectCount--;
    } else {
        //收藏
        request.post(`/video/interaction/${route.params.workId}/collect`)
        videoInteractionData.value.collect = true;
        videoInteractionData.value.collectCount++;
    }
}


</script>